<template>
  <div class="main">
    <div class="block_item">
      <div class="abos">
        <span class="left">{{ leftTitle }}</span>
        <span class="right" @click="handleClick">
          <small>可多选</small>
					 <img class="imgIcon" src="~static/images/collage_icon_arrow_right.png" />
        </span>
      </div>
      <ul class="abos_list">
        <li v-for="(item, index) in listArr" :key="index"  @click="removeItem(listArr, item)">
          <span>{{ item.indexOf('&')>0?item.substring(0,item.indexOf('&')):item }}</span>
          <small>X</small>
        </li>
      </ul> 
    </div>
    <ChoProvince :popupShow="isPopupShow" :choLists="listArr" :proArr="proArr" :placeholderText="plhdText" @closePopUp="changeStatus" @sendList="listContentChange"></ChoProvince>
  </div>
</template> 
 
<script>
  import ChoProvince from '~/components/ChoProvince'
  export default {
    props: {
      leftTitle: String,
      showArr: Array,
      plhdText: String,
      proArr: Array,
    },
    components: {
      ChoProvince,
    },
    data() {
      return {
        isPopupShow: false,
        listArr: [],
        sendObj: {},
				statu:''
      }
    },
    watch: {
      showArr(arr) {
        this.listArr = arr;
      }
    },
    mounted() {
		
      this.listArr = this.showArr;
    },
    methods: {
      handleClick() {
        this.isPopupShow = true;
      },
      removeItem(arr, item) {
        this.listArr = arr.filter((x)=> {
          return x !== item;
        });
        this.sendObj.msgList = this.listArr;
        this.$emit('removeProArrItem', this.sendObj)
      },
      changeStatus() {
        this.isPopupShow = false;
      },
      listContentChange(arr) {
        for (const item of arr) {
						console.log(item)
          if (this.listArr.indexOf(item) == -1) {
							this.listArr.push(item);           
          }
        }
        this.isPopupShow = false;
      }
    }
  }
</script>

<style lang="less" scoped>
  .main {
    background: #fff;
    width: 100%;
    .block_item {
      .abos {
        width: 6.3rem;
        height: 0.9rem;
        line-height: 0.9rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          color: #222;
          font-size: 0.3rem;
          font-weight: bold;
          letter-spacing: 0.02rem;
        }
        .right {
          display: flex;
          align-items: center;
          small {
            font-size: 0.26rem;
            height: 0.37rem;
            line-height: 0.37rem;
            margin-right: 0.08rem;
          }
        }
      }
      .abos_list {
        list-style: none;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        align-items: center;
        padding-left: 0;
        li {
          margin: 0.1rem 0;
          padding: 0.17rem 0.2rem 0.16rem 0.2rem;
          background: #FAFAFA;
          color: #222;
          font-size: 0.26rem;
          border-radius: 0.1rem;
          margin-bottom: 0.1rem;
          margin-right: 0.12rem;
          small {
            margin-left: 0.2rem;
            width: 0.2rem;
            height: 0.2rem;
            color: #BBB;
          }
        }

      }
    }
  }
  .imgIcon {
    width: 0.4rem;
    height: 0.4rem;
  }
</style>

